<template>
    <div class="loginBox">
        <div class="loginContainer">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <div class="loginTitle">登 录
                    <i class=" el-icon-setting"></i>
                </div>
                <el-form-item prop="name">
                    <el-input clearable placeholder="用户名" v-model="loginForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input show-password placeholder="密码" type="password" v-model="loginForm.password"></el-input>
                </el-form-item>


                <!-- 用户输入验证码的输入框 -->
                <el-form-item prop="captcha" style="margin: 0 0 5px 0;">
                    <el-input style="margin-right: 5px;" placeholder="验证码" v-model="loginForm.captcha"></el-input>
                    <img @click="getcode()" style="width: 50%;height: 40px;cursor: pointer;" :src="captchaImage" alt="验证码">
                </el-form-item>

                <el-form-item style="margin-top: 20px;">
                    <button class="cta" v-preventReClick="2000" @click="login">
                        登 入
                    </button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { loginApi, obtainVerificationCode } from "@/utils/api";
export default {
    name: 'loginPages',
    data() {
        return {
            loginForm: {
                name: '',
                password: '',
                captcha: '',
                key: ''
            },
            captchaImage: '', // 保存验证码图片的Base64编码
            loginRules: {
                name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
            },
            userData: {}
        };
    },
    mounted() {
        this.getcode()
    },
    methods: {
        login() {
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '登录中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    if (this.loginForm.room_id == '') {
                        delete this.loginForm.room_id
                    }
                    const res = await loginApi(this.loginForm).catch(err => {
                        return console.error(err)
                    })
                    if (res.data && res.data.code == '200') {
                        this.userData = res.data.data
                        const token = res.data.data.token;
                        window.localStorage.setItem('token', token);
                        window.localStorage.setItem('user', JSON.stringify(this.userData));
                        this.$message.success(res.data.msg);
                        this.$refs.loginForm.resetFields();
                        setTimeout(() => {
                            loading.close();
                            this.$router.push({
                                path: '/Home',
                            })
                        }, 1000)
                    } else {
                        loading.close();
                        this.$message.warning(res.data.msg);
                        this.$refs.loginForm.resetFields();
                    }
                } else {
                    if (this.loginForm.name == '' || this.loginForm.password == '') {
                        this.$message.warning('请填写账号密码');
                    } else {
                        this.$message.warning('请填写验证码');
                    }
                }
            });
        },
        async getcode() {
            const res = await obtainVerificationCode().catch(err => {
                return console.error(err)
            })
            if (res.data.code == '200') {
                this.loginForm.key = res.data.data.key;
                this.captchaImage = res.data.data.captcha;
            }
        }
    },
};
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}
</style>
<style lang="less" scoped>
.loginBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #ffffff 0%, #6bb0ff 50%, #3498db 100%);

}

.loginContainer {
    width: 650px;
    height: 355px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 191, 255, 0.075);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 2px rgba(255, 255, 255, 0.4) solid;
    border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
    border-right: 2px rgba(40, 40, 40, 0.35) solid;
}

::v-deep .el-form-item__content {
    line-height: 40px;
    position: relative;
    display: flex;
    font-size: 14px;
    justify-content: center;
}

.loginTitle {
    margin: 15px 0;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
}

.login-form {
    width: 45%;
}

.cta {
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #f5f5f5;
    color: white;
    background-color: transparent;
    cursor: pointer;
    border-radius: 10px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    min-width: 80%;
}

.cta:hover {
    border-color: #ccc;
    box-shadow: 0 0 20px rgba(148, 194, 246, 0.8);
}

.cta:active {
    box-shadow: 0 0 10px rgba(9, 117, 241, 0.4);
}
</style>